<!--
 * @Description  : 动态表格
 * @Autor        : 杜康
 * @Date         : 2023-04-19 15:01:48 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-20 18:16:06 +0800
-->
<template>
  <el-table
    :data="tableData"
    ref="table"
    @selection-change="selectionChange"
    border=""
    highlight-current-row
    v-loading="loading"
    empty-text="没有满足条件的数据哦！"
  >
    <el-table-column
      type="selection"
      v-if="checked"
      width="60"
      align="center"
    ></el-table-column>
    <el-table-column
      type="index"
      width="80"
      label="序号"
      align="center"
    ></el-table-column>
    <template v-for="(header, hKey) in headers">
      <el-table-column
        :prop="header.key"
        :label="header.text"
        :key="hKey"
        align="center"
        min-width="160"
      >
      </el-table-column>
    </template>
    <slot name="tableColumn"></slot>
    <slot name="btnOperation"></slot>
  </el-table>
</template>

<script>
import { isEmpty } from "lodash";
import { headerCellStyle } from "@/assets/js/utils.js";
export default {
  name: "MyTable",
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {
        return {};
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    checked: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      headerCellStyle,
      headers: [],
      tableData: [],
    };
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        if (!isEmpty(newVal)) {
          this.init();
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (!isEmpty(this.data)) {
      this.init();
    }
  },
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-17 10:15:01 +0800
     */
    init() {
      const { headers, body } = this.data;
      this.headers = headers;
      this.tableData = body;
    },
    /**
     * @description: 当选择项发生变化时会触发该事件
     * @param {*} selection
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-19 17:20:28 +0800
     */
    selectionChange(selection) {
      this.$emit("selectData", selection);
    },
  },
};
</script>
